.{$dropdowncustom-prefix}
  display inline-block
  &.{$dropdown-prefix}-text
    cursor pointer
    &:hover
      .d-dropdowncustom-show-content
        color $primary-color
  .{$dropdowncustom-prefix}-show-content
    position relative
    padding 4px 28px 4px 8px
  .{$icon-prefix}-down
    position absolute
    top 4px
    right 8px
    color $gray-color
    transition $transition-time
  &:hover
    .{$icon-prefix}-down
      color $gray-color
  &-trigger
    .{$icon-prefix}-down
      color $primary-color
      transform rotate(180deg)
  &.{$button-prefix}
    padding 0
    .{$dropdowncustom-prefix}-show
      padding 1px 1px 2px
    &:hover
      .{$icon-prefix}-down
        color $primary-color
  &.{$button-prefix}-primary
    .{$icon-prefix}-down
      color white
    &:hover
      .{$icon-prefix}-down
        color  white

.{$dropdown-prefix}-group
  margin 5px 0
  z-index 10
  color $dark-color
  > div
    background-color white
    box-sizing border-box
    border-radius $border-radius-size
    box-shadow 0 5px 10px rgba(0, 0, 0, .1)
  &.{$dropdown-prefix}-group-trigger
    .{$dropdown-prefix}-group-inner
      transform scale(1)
      opacity 1
  &[x-placement^='top']
    .{$dropdown-prefix}-group-inner
      transform-origin bottom left
  &[x-placement^='bottom']
    .{$dropdown-prefix}-group-inner
      transform-origin top left
  .{$dropdown-prefix}-group-inner
    transition .25s cubic-bezier(.24, .22, .015, 1.56)
    transition-property transform, opacity
    transform scale(.8)
    opacity 0
